.kuiTabs {
  display: flex;
  border-bottom: $kuiBorderThin;

  @include darkTheme {
    border-bottom: 1px solid $tabBorderColor--darkTheme;
  }
}


/**
 * 1. Override button styles (some of which are from Bootstrap).
 * 2. Adding a border shifts tabs right by 1px, so we need to shift them back.
 * 3. Move the tab down so that its bottom border covers the container's bottom border.
 * 4. When the tab is focused, its bottom border changes to be 1px, so we need to add 1px more
 *    of padding to make sure the text doesn't shift down.
 */
.kuiTab {
  appearance: none; /* 1 */
  cursor: pointer;
  padding: 10px 30px;
  font-size: $kuiFontSize;
  color: $kuiSubduedTextColor;
  background-color: $tabBackgroundColor; /* 1 */
  border: 1px solid $kuiBorderColor;
  border-radius: 0; /* 1 */
  margin-bottom: -1px; /* 3 */

  @include darkTheme {
    color: $tabColor--darkTheme;
    background-color: $tabBackgroundColor--darkTheme;
    border-color: $tabBorderColor--darkTheme;
  }

  & + & {
    border-left: none;

    &:focus:not(.kuiTab-isSelected):not(:active) {
      margin-left: -1px; /* 2 */
    }
  }

  &:active {
    outline: none !important; /* 1 */
    box-shadow: none; /* 1 */
  }

  &:focus {
    outline: none; /* 1 */
  }

  &:focus:not(.kuiTab-isSelected):not(:active) {
    z-index: 1;
    color: $kuiLinkColor;
    border: 1px solid $kuiSelectedBorderColor !important;

    @include darkTheme {
      color: $tabColor--darkTheme;
      background-color: $tabBackgroundColor--darkTheme;
      border-color: $tabBorderColor--darkTheme !important;
    }
  }

  &:hover:not(.kuiTab-isSelected) {
    color: $kuiLinkHoverColor;
    background-color: $tabHoverBackgroundColor;

    @include darkTheme {
      color: $kuiLinkColor-isHover--darkTheme;
      background-color: $tabHoverBackgroundColor--darkTheme;
    }
  }

  &.kuiTab-isSelected {
    cursor: default;
    color: $kuiFontColor;
    border-bottom-color: $tabBackgroundColor;

    @include darkTheme {
      color: $tabColor--darkTheme;
      background-color: $tabBackgroundColor--darkTheme;
      border-bottom-color: $tabBackgroundColor--darkTheme;
    }
  }
}
